<template>
  <div class="root">
    <span>文字阴影：</span>
    <hr/>
    <div>
      <div>盒子阴影box-shaodw：</div>
      <div class="boxShadow"></div>
    </div>
    <div style="display:flex;height:200px">
      <div></div>
      <div></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'shadow'

}
</script>

<style>
span {
  text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.4);
/* 
x轴偏移量(阴影起始x轴坐标) y轴偏移量(阴影起始y轴坐标) 模糊半径(模糊程度，值越大越模糊，<0没有阴影) 阴影颜色 */

}
.boxShadow {
  width: 200px;
  height: 300px;
  background-color: yellowgreen;
  box-shadow: 30px 40px 10px 5px rgba(0, 0, 0, 0.4) inset;
/* 
轴偏移量 y轴偏移量 模糊半径(模糊程度) 扩散半径(阴影面积大小) 阴影颜色 内阴影(inset)/外阴影(outset，默认值)
outset手动显式设置会报错，勿手动设置
 */
}

</style>